{% extends "base.html" %}
{% import "page.html" as page %}
{% block content %}
    <div id="ip_pool_list" class="content-wrapper list">
        <section class="content-header">
            <h1>
                IP地址池管理
                <small>
                    默认每页显示25条数据
                </small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="{{ url_for('index.index') }}"><i class="fa fa-dashboard"></i> Home</a></li>
                <li> 管理员配置 </li>
                <li class="active"> IP地址池</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            IP池列表
                            {% if current_user.role.name == 'Admin' %}
                                <button type="button" class="btn btn-primary btn-sm" style="float:right;margin-top:-5px"
                                        data-target=".add-ipPool-modal" data-toggle="modal">添加IP池
                                </button>
                            {% endif %}
                            <div class="modal fade add-ipPool-modal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true"> </span></button>
                                            <h4 class="modal-title" id="myModalLabel">添加IP池</h4>
                                        </div>
                                        <div class="modal-body">
                                            <form class="form-horizontal">
                                                <div class="form-group">
                                                    <label for="inputInnerIP" class="col-sm-2 control-label">IP段</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control" id="inputInnerIP"
                                                               placeholder="IP/24(e.g:192.168.1.0/24)"
                                                               v-model="new_ip_segment">
                                                    </div>
                                                </div>
                                            </form>
                                            <div style="color:red;text-align:center" v-if="errMsg"
                                                 v-text="errMsg"></div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary" @click="add_ip_pool()">提交
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th>IP段</th>
                                        <th>IP使用情况</th>
                                        {% if current_user.role.name == 'Admin' %}
                                            <th>操作</th>
                                        {% endif %}
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for item in ip_segments %}
                                        <tr>
                                            <td>
                                                <a href="{{ url_for('assets.asset_ip_pool_detail', ip_segment_id=item.id) }}">{{ item.ip_segment }}</a>
                                            </td>
                                            <td><span style="color:red">{{ item.count_available_ips() }}</span>(可用) |
                                                <span style="color:red">{{ item.count_unavailable_ips() }}</span>(不可用)
                                            </td>
                                            {% if current_user.role.name == 'Admin' %}
                                                <td><span class="label label-danger"
                                                          style="margin-right:10px;cursor:pointer"
                                                          @click="show_delete_ip_pool_modal('{{ item.id }}')">删除</span>
                                                </td>
                                            {% endif %}
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            {% if pagination %}
                                <div class="pagination" style="float:right">
                                    {{ page.pagination_widget(pagination,"assets.assets_ip_pool") }}
                                </div>
                            {% endif %}
                            <div class="modal fade delete-ip-pool-modal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel4" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel4">删除IP池</h4>
                                        </div>
                                        <div class="modal-body">
                                            <form class="form-horizontal">
                                                <div class="form-group">
                                                    <label style="text-align: center" class="col-sm-5 control-label">确认是否删除该IP池?</label>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary" @click="delete_ip_pool()">删除
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal fade ip-pool-info-modal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">IP池</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="table-responsive">
                                                <table class="table table-bordered">
                                                    <thead>
                                                    <tr>
                                                        <th>IP</th>
                                                        <th>状态</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr v-for="line in ip_list">
                                                        <td value="${line.IP}" v-text="line.IP"></td>
                                                        <td value="${line.status}" v-text="line.status"></td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-sm">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                &times;
                                            </button>
                                            <h4 class="modal-title" id="myModalLabel">IP池</h4>
                                        </div>
                                        <div class="table-responsive">
                                            <table class="table table-striped table-bordered table-hover">
                                                <thead>
                                                <tr>
                                                    <th>IP</th>
                                                    <th>状态</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                {% for item in ip_segments %}
                                                    <tr>
                                                        <td>{{ item.IP }}</td>
                                                        <td>{{ item.status }}</td>
                                                    </tr>
                                                {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary" @click="modify_ip_pool()">提交
                                            </button>
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
{% endblock %}
{% block bottom_js %}
    <script>
        window.onload = function () {
            if (({{ menu|tojson }}) in {
                'region_list': '',
                'supplier_list': '',
                'ip_pool_list': '',
                'cabinet_list': '',
                'ip_pool_detail_list': ''
            }) {
                $('#asset_manage').addClass('active').addClass('menu-open');
            } else {
                $('#asset_manage').removeClass('active').removeClass('menu-open');
            }
        };
        data = {
            ip_list: '',
            new_ip_segment: '',
            ip_segment_id: '',
            ip_segment_id2: '',
            errMsg: '',
            errMsg2: '',
        };
        new Vue({
            el: '.list',
            data: data,
            methods: {
                add_ip_pool: function () {
                    let ip_segment = this.new_ip_segment;
                    add_ip_pool(ip_segment);
                },
                /*
                get_ip_pool: function (ip_segment_id) {
                    get_ip_pool(ip_segment_id);
                },
                */
                show_ip_pool_info: function (ip_segment_id) {
                    $('.ip-pool-info-modal').modal('show');
                    show_ip_pool_info(ip_segment_id);
                },
                show_delete_ip_pool_modal: function (ip_segment_id) {
                    this.ip_segment_id2 = ip_segment_id;
                    $('.delete-ip-pool-modal').modal('show');
                },
                delete_ip_pool: function () {
                    delete_ip_pool(this.ip_segment_id2);
                },
            }
        });

        function show_ip_pool_info(ip_segment_id) {
            $.ajax({
                url: "{{url_for('assets.asset_ip_pool_detail')}}",
                data: {'ip_segment_id': ip_segment_id},
                timeout: 10000,
                type: 'post',
                success: function (response) {
                    data.ip_list = response;
                }
            })
        }

        function delete_ip_pool(ip_segment_id) {
            $.ajax({
                url: "{{url_for('api_assets.api_assets_ip_pool')}}",
                data: {'ip_segment_id': ip_segment_id},
                timeout: 10000,
                type: 'delete',
                success: function (response) {
                    if (response.resCode === 1) {
                        swal({
                            type: 'success',
                            title: '删除成功',
                            showConfirmButton: true,
                        }).then(function () {
                            window.location.href = "{{ url_for('assets.assets_ip_pool') }}"
                        });
                    } else {
                        swal({
                            type: 'error',
                            title: '删除失败',
                            showConfirmButton: false,
                            timer: 1500
                        })
                    }
                },
                error: function (xhr) {
                    swal({
                        type: 'error',
                        text: xhr.responseText,
                        showConfirmButton: true,
                    })
                }
            })
        }

        function add_ip_pool(ip_segment) {
            /* trim方法用于去除字符串的头尾空格 */
            if ($.trim(ip_segment).length === 0) {
                data.errMsg = 'IP地址段不能为空，请正确填写IP地址段!';
                return;
            }

            let reg = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(\/([0-9]|[1-2][0-9]|3[0-2]))$/gi;
            if (reg.test($.trim(ip_segment)) !== true) {
                data.errMsg = '输入的IP段不符合要求！';
                return;
            }

            $.ajax({
                url: "{{url_for('api_assets.api_assets_ip_pool')}}",
                data: {
                    'ip_segment': $.trim(ip_segment)
                },
                timeout: 10000,
                type: 'post',
                success: function (response) {
                    if (response.resCode === 1) {
                        swal({
                            type: 'success',
                            title: '添加成功',
                            showConfirmButton: true,
                        }).then(function () {
                            window.location.reload();
                        });
                        $('.add-ipPool-modal').modal('hide');
                    } else {
                        swal({
                            type: 'error',
                            title: '添加失败',
                            text: response.errMsg,
                            showConfirmButton: true
                        })
                    }
                },
                error: function (response) {
                    $.notify({
                            title: "<strong>IP池添加错误:</strong><br>",
                            message: response.responseText
                        },
                        {
                            type: 'danger',
                            delay: 3600000
                        });
                }
            })
        }
    </script>
{% endblock %}